@charset "utf-8";

@function r($px){
    @return ($px/40)*1rem;
    
    
}

@function px($px){
    @return ($px/2) * 1px;
}
//大的容器
#web{
    width: r(750);
    height: 100%;
    margin: 0 auto;
    position: relative;
}
//头部
header{
    width: 100%;
    height:px(150);
    
   
    //头部logo
    .head_logo{
        margin-top: 10px;
        width: 61.5px;
        height: 61.5px;
        overflow: hidden;
        margin-left: 20px;
//      margin-bottom: 10px;
        img{
            width: 100%;
        }
    }
    
    //头部搜索框
    .search{
        margin-left: r(73);
        width: r(264);
        height: 25px;
        border: 1px solid #ff9344;
        border-radius: 25px;
        margin-top:25px;
        font-size: 0;
        padding:0px 8px;
        box-sizing: border-box;
        input{
          
            vertical-align: middle;
            display: inline-block;
            border: none;
            width:calc(100% - 24px) ;
            height: 100%;
        }
        img{
            vertical-align: middle;
            width: 18px;
            height: 18px;
        }
    }
   
   //下拉菜单
   .selettBar{
       width: 79px;
       height: 27px;
       border: 1px solid #FF9344;
       margin-top: 25px;
       select{
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        background: white;
        vertical-align: top;
        appearance:none;
        -webkit-appearance:none;
        background-image: url(../img/sanjiaoxing.png);
        background-repeat: no-repeat;
        background-size: 15px 8px;
        background-position: right 6px center;
        
       }
   } 
   
   
   
}


footer{
  width: r(750);
   height: px(136);
   position: absolute;
   left: 0;
   bottom: 0;
   background: white; 
// margin-top: 20px;
   
   
   li{
//     padding-top: 20px;
       font-size: 16px;
      text-align: center;
       width: 23%;
       height: 40px;
       margin-top: 10px;
       color: black;
       float: left;
       
        a{ 
       color: #000000;
       
       .iconfont{
           margin-top: 10px;
           font-size: 30px;
          
       }
       .active{
           color: #FF9344;
       }
   }
   }
}

.session{
    position: absolute;
    top:75px;
    bottom: px(130);
    left: 0;
    right: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
.picture1{
    width: r(750);
    height: px(285);
    img{
        width: 100%;
    }
}
.pre{
    width: r(750);
    height: r(80);
    margin-top: r(35);
//  border: 1px solid black;
    
}
.session .preferential .pre .picture{
    width: r(55);
    height: px(54);
}
.session .preferential .pre .picture > img {
    width: 100%;
    margin-left: r(21);

}

.session .preferential  .pre .label {
    width: r(140);
    height: px(25);
    font-size: r(30);
    margin-left: r(50);

}

.session .preferential  .pre .more {
    margin-top: r(-5);
    //margin-right: 20px;
}
.session .preferential  .pre .more  {
    width: r(160);
    height: px(25);
    font-size: r(30);
    margin-left: 8px;

    a{
        display: block;
        width: r(80);
        height: px(25);
        margin-top: r(5);
        float: left;
    }
    img{
        display: block;

        float: left;
    }
    
}
.session .preferential  .pre .label a,.session .preferential  .pre .more a{color: #000000;}

.introduce{
    width: r(750);
    height: px(100);
}
.introduce .detail1 {
    width: r(241);
    height: px(100);
    overflow: hidden;
    margin-left: r(20);
    margin-bottom: r(20);
    float: left;
    
img{
    width: 100%;
}
   
}

.introduce .detail2 {
     width: r(241);
    height: px(100);
    overflow: hidden; 
     padding-left: r(48);
     margin-bottom: r(20);
    img{
        width: 100%;
    }

}


.like{
    width: r(750);
    height: r(80);
    margin-top: r(180);
//  border: 1px solid black;
    
}
.session .guess .like .pictrueone {
    width: r(55);
    height: px(54);
}
.session .guess .like .pictrueone > img {
     width: 100%;
    margin-left: r(21);
    
}
//.session .guess  .like {
//  margin-bottom: 20px;
//}

.session .guess  .like .labelone {
     width: r(140);
    height: px(50);
    font-size: r(30);
    margin-left: r(25);
    
    
}

.session .guess  .like .moreone  {
   width: r(160);
    height: px(50);
    font-size: r(30);
    margin-left: r(8);

    a{
        display: block;
        width: r(80);
        height: px(25);
        margin-top: r(5);
        float: left;
    }
    img{
        display: block;

        float: left;
    }
}
.session .guess  .like .labelone a,.session .guess  .like .moreone a{color: #000000;}
.flower img,.duck img{
    vertical-align: middle;
    width: r(211);
    height: px(163);
    margin-left: 20px;
}
.flower .flower1, .duck .duck1 {  
     vertical-align: middle; 
    margin-left: r(20);
    margin-top: r(3);
    width:r(350);
    margin-bottom: 21px;
    position: relative;
    
}


.flower .flower1 .wan a {
     vertical-align: middle;
    font-size: r(30);
    color: #000000;
}
.flower .flower1 .wan label {
     vertical-align: middle;
    font-size: r(20);
    font-weight: 400;
    position: absolute;
    top: 7px;
    right: 0;
}

.flower .flower1 .wan {
    margin-bottom: 10px;
}
.set-meal {
    font-size: r(25);
    margin-bottom: 5px;
}
.sale label:nth-of-type(1) {
    color: #ff9344;
    font-size: r(25);
}

.sale {
    position: relative;
}

.sale label:nth-of-type(2) {
    font-size: r(20);
    position: absolute;
    top: 0px;
    right: 0;
}
.duck .duck1 .zhou a {
     color: #000000;
    font-size: r(30);
}
.duck .duck1 .zhou label {
    font-size: r(20);
    font-weight: 400;
    position: absolute;
    top: 7px;
    right: 0;
}

.duck .duck1 .zhou {
    margin-bottom: 10px;
} 



@media screen and (min-width:750px){   

        
.picture1{
    width: 750px;
    height: 285px;
    
}

.introduce .detail1 {
    width: 241px;
    height: 100px;
    overflow: hidden;
    margin-left: 20px;
    margin-bottom: 20px;
    float: left;
      
}

.introduce .detail2 {
     width: 241px;
    height: 100px;
    overflow: hidden;
    margin-left: 48px;
    margin-bottom: 20px;
    
}


}
            

